<style>
  .layui-form-item .layui-input-inline {
    width: 160px;
  }
  
  .cover-form .avatar-add {
    width: 100%;
    height: 450px;
  }
  .cover-form .avatar-add img {
    top: 58%;
    width: 100%;
    height: 80%;
    transform: translate(-50%, -50%);
    margin: 0;
    border-radius: 0;
  }
  .avatar-add p {
    top: 45px;
  }
  .avatar-add .upload-img {
    top: 15px;
  }
</style>
<div class="layui-container fly-marginTop fly-user-main">
  {include file="common/menu"/}

  <div class="fly-panel fly-panel-user" pad20>
    <div class="layui-tab layui-tab-brief" lay-filter="user">
      <ul class="layui-tab-title" id="LAY_mine">
        <li class="layui-this" lay-id="info">我的资料</li>
        <li lay-id="avatar">头像</li>
        <li lay-id="pass">密码</li>
        <li lay-id="bind">封面图</li>
      </ul>
      <div class="layui-tab-content" style="padding: 20px 0;">
        <!-- 我的资料 -->
        <div class="layui-form layui-form-pane layui-tab-item layui-show">
          <form method="post">
            <input type="hidden" name="action" value="profile">
            <div class="layui-form-item">
              <label for="L_email" class="layui-form-label">邮箱</label>
              <div class="layui-input-inline">
                <input type="text" id="L_email" name="email" value="{$LoginUser.email}" disabled required
                  lay-verify="email" autocomplete="off" value="" class="layui-input">
              </div>

              {if condition="$LoginUser.auth == 0"}
              <div class="layui-form-mid layui-word-aux">该邮箱未认证，需
                <a id="auth" style="font-size: 12px; color: #4f99cf;cursor: pointer;">验证邮箱</a>。
              </div>
              {/if}
            </div>
            <div class="layui-form-item">
              <label for="L_username" class="layui-form-label">昵称</label>
              <div class="layui-input-inline">
                <input type="text" id="L_username" name="nickname" value="{$LoginUser.nickname}" required
                  lay-verify="required" autocomplete="off" value="" class="layui-input">
              </div>
              <div class="layui-inline">
                <div class="layui-input-inline" style="width: 245px;">
                  <input type="radio" name="sex" value="0" {$LoginUser.sex==0 ? 'checked' : '' } title="保密">
                  <input type="radio" name="sex" value="1" {$LoginUser.sex==1 ? 'checked' : '' } title="男">
                  <input type="radio" name="sex" value="2" {$LoginUser.sex==2 ? 'checked' : '' } title="女">
                </div>
              </div>
            </div>
            <div class="layui-form-item">
              <!-- 省份 -->
              <label for="province" class="layui-form-label">省份</label>
              <div class="layui-input-inline">
                <select name="province" id="province" lay-filter="province">
                  <option value="0">请选择</option>
                  {foreach $provinces as $item}
                  <option value="{$item.code}" {$item.code==$LoginUser.province ? 'selected' : '' }>{$item.name}
                  </option>
                  {/foreach}
                </select>
              </div>

              <!-- 市 -->
              <label for="city" class="layui-form-label">市</label>
              <div class="layui-input-inline">
                <select name="city" id="city" lay-filter="city">
                  <option value="0">请选择</option>
                  {foreach $citys as $item}
                  <option value="{$item.code}" {$item.code==$LoginUser.city ? 'selected' : '' }>{$item.name}</option>
                  {/foreach}
                </select>
              </div>

              <!-- 区 -->
              <label for="district" class="layui-form-label">区</label>
              <div class="layui-input-inline">
                <select name="district" id="district">
                  <option value="0">请选择</option>
                  {foreach $districts as $item}
                  <option value="{$item.code}" {$item.code==$LoginUser.district ? 'selected' : '' }>{$item.name}
                  </option>
                  {/foreach}
                </select>
              </div>
            </div>
            <div class="layui-form-item layui-form-text">
              <label for="L_sign" class="layui-form-label">签名</label>
              <div class="layui-input-block">
                <textarea placeholder="随便写些什么刷下存在感" id="L_sign" name="content" autocomplete="off" class="layui-textarea"
                  style="height: 80px;">{$LoginUser.content}</textarea>
              </div>
            </div>
            <div class="layui-form-item">
              <button class="layui-btn" key="set-mine" lay-submit>确认修改</button>
            </div>
          </form>
        </div>
        <!-- 头像 -->
        <div class="layui-form layui-form-pane layui-tab-item">
          <form method="post" enctype="multipart/form-data">
              <input type="hidden" name="action" value="avatar">
              <div class="layui-form-item">
                  <div class="avatar-add">
                      <p>建议尺寸168*168，支持jpg、png、gif，最大不能超过50KB</p>
                      <button type="button" class="layui-btn upload-img" onclick="avatar.click()">
                          <i class="layui-icon">&#xe67c;</i>选择头像
                      </button>
                      <input type="file" name="avatar" id="avatar" hidden>
                      <img id="img" src="{$LoginUser.avatar ? $LoginUser['avatar'] : '/static/home/res/images/upload.png'}">
                      <span class="loading"></span>
                  </div>
              </div>
              <div class="layui-form-item">
                  <button class="layui-btn" key="set-mine" lay-submit>上传</button>
              </div>
          </form>
        </div>
        <!-- 密码 -->
        <div class="layui-form layui-form-pane layui-tab-item">
          <form method="post">
            <input type="hidden" name="action" value="setpwd">
            <div class="layui-form-item">
              <label for="oldpass" class="layui-form-label">当前密码</label>
              <div class="layui-input-inline">
                <input type="password" id="oldpass" name="oldpass" required lay-verify="required" autocomplete="off"
                  class="layui-input">
              </div>
              <!-- <div class="layui-form-mid layui-word-aux">6到16个字符</div> -->
            </div>
            <div class="layui-form-item">
              <label for="newpass" class="layui-form-label">新密码</label>
              <div class="layui-input-inline">
                <input type="password" id="newpass" name="newpass" required lay-verify="required" autocomplete="off"
                  class="layui-input">
              </div>
              <!-- <div class="layui-form-mid layui-word-aux">6到16个字符</div> -->
            </div>
            <div class="layui-form-item">
              <label for="repass" class="layui-form-label">确认密码</label>
              <div class="layui-input-inline">
                <input type="password" id="repass" name="repass" required lay-verify="required" autocomplete="off"
                  class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <button class="layui-btn" key="set-mine" lay-submit>确认修改</button>
            </div>
          </form>
        </div>  
        <!-- 封面 -->
        <div class="layui-form layui-form-pane layui-tab-item">
          <form method="post" class="cover-form" enctype="multipart/form-data">
              <input type="hidden" name="action" value="cover">
              <div class="layui-form-item">
                  <div class="avatar-add">
                      <p>建议尺寸1920*1080，支持jpg、png、gif，最大不能超过50KB</p>
                      <button type="button" class="layui-btn upload-img" onclick="cover.click()">
                          <i class="layui-icon">&#xe67c;</i>选择封面
                      </button>
                      <input type="file" name="cover" id="cover" hidden>
                      <img id="cover_img" src="{$LoginUser['cover_cdn'] ? $LoginUser['cover_cdn'] : '/static/home/res/images/upload.png'}">
                      <span class="loading"></span>
                  </div>
              </div>
              <div class="layui-form-item">
                  <button class="layui-btn cover-submint" key="set-mine" lay-submit>上传</button>
              </div>
          </form>
        </div>

      </div>

    </div>
  </div>
</div>
</div>

<script>
  layui.use(['layer', 'form'], function () {

    var $ = layui.jquery,
      layer = layui.layer,
      form = layui.form

    $('#auth').click(function () {
      var email = $('#L_email').val()
      $.ajax({
        type: 'post',
        url: `{:url('home/user/email')}`,
        data: {
          email
        },
        dataType: 'json',
        success: function (res) {
          // console.log(res)
          if (res.code == 1) {
            layer.msg(res.msg);
          } else {
            layer.msg(res.msg);
          }
        }
      })
    })
    
    form.on('select(province)', function (data) {
      let code = data.value
      $.ajax({
        type: 'post',
        url: `{:url('home/user/area')}`,
        data: {
          code
        },
        dataType: 'json',
        success: function (res) {
          console.log(res)
          // return false;
          if (res.code == 1) {
            let option = ''
            res.data.forEach(item => {
              option += `<option value="${item.code}" key="">${item.name}</option>`
            });
            let code = res.data[0].code ? res.data[0].code : '';
            getDistrict(code, '#district')
            $('#city').html(option)
            form.render('select')
          }
        }
      })
    })

    form.on('select(city)', function (data) {
      // console.log(data)
      let code = data.value
      getDistrict(code, '#district')
    })

    function getDistrict (code, ele) {
      $.ajax({
        type: 'post',
        url: `{:url('home/user/area')}`,
        data: {
          code
        },
        dataType: 'json',
        success: function (res) {
          // console.log(res)
          if (res.code == 1) {
            let option = ''
            res.data.forEach(item => {
              option += `<option value="${item.code}">${item.name}</option>`
              $(ele).html(option)
            });
            form.render('select')
          }
        }
      })
    }

    // 图片预览函数
    function GetObjectURL (file) {
      // createObjectURL  给一个文件对象 可以提取出一个url本地地址出来
      var url = null;

      //判断是否为IE浏览器还是google还是其他浏览器
      if (window.createObjectURL != undefined) {
        url = window.createObjectURL(file)
      } else if (window.URL != undefined) {
        url = window.URL.createObjectURL(file)
      } else if (window.webkitURL != undefined) {
        url = window.webkitURL.createObjectURL(file)
      }
      return url
    }

    // 头像预览
    $('#avatar').change(function () {
      let file = $(this)[0].files[0] ? $(this)[0].files[0] : {}
      let url = GetObjectURL(file)

      $('#img').attr('src', url)
    })

    // 封面预览
    $('#cover').change(function () {
      let file = $(this)[0].files[0] ? $(this)[0].files[0] : {}
      let url = GetObjectURL(file)

      $('#cover_img').attr('src', url)
    })

  })
</script>